<template>
  <div>
    <table width="100%">
      <tr>
        <td id="left_cont">
          <table width="100%" height="100%">
            <tr height="155">
              <td colspan="2">
                <img src="/images/logo2.png" title="" alt="" />
              </td>
            </tr>
            <tr>
              <td width="20%" rowspan="2">&nbsp;</td>
              <td width="25%">
                <table width="100%">
                  <tr height="70">
                    <td align="right">
                      <img src="/images/left.png" title="" alt="" />
                    </td>
                  </tr>
                </table>
              </td>
              <td width="15%" rowspan="2">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2">&nbsp;</td>
            </tr>
            -->
          </table>
        </td>

        <td id="right_cont">
          <table height="100%">
            <tr height="30%">
              <td colspan="3">&nbsp;</td>
            </tr>
            <tr>
              <td width="30%" rowspan="5">&nbsp;</td>
              <td valign="top" id="form">
                <form action="" method="">
                  <table valign="top" width="70%">
                    <tr>
                      <td>账号：</td>
                      <td>
                        <input
                          type="text"
                          v-model="username"
                          name=""
                          value=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
                      <td>
                        <input type="password" v-model="pwd" name="" value="" />
                      </td>
                    </tr>
                  </table>

                  <button id="but" @click.prevent="login">登录</button>
                </form>
              </td>
              <td rowspan="5">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="3">&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      username: null,
      pwd: null,
    };
  },
  methods: {
    login() {
      const login = {
        lname: this.username,
        lpwd: this.pwd,
      };
      var query = `?username=${login.lname}&pwd=${login.lpwd}`;
      console.log(query);
      axios
        .get("http://localhost:8888/login" + query)
        .then((resp) => {
          console.log(resp.data);
          var rs = resp.data;
          if (rs == null) {
            this.$message.error("登陆信息错误，请重新输入");
            alert("登入失败");
          } else {
            sessionStorage.setItem("id",rs.id);
            sessionStorage.setItem("name",rs.lName);
            this.$store.state.username = this.lname;
            this.$router.push("/index/sy");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    cz() {
      console.log("chongzhi");
      this.loginname = "";
      this.loginpwd = "";
    },
  },
};
</script>
<style scoped>
#but {
  font-size: 20px;
  width: 100px;
  background-color: red;
  text-align: center;
  margin: 200px, 100px;
}
</style>
